<template>
  <div class="common-container" style="min-height: calc(100vh - 60px)">
    <div class="common-content">
      <div v-for="item in articleList" style="padding: 20px; border-radius: 10px; background-color: #fff;">
        <div style="display: flex">
          <div style="flex: 1">
            <div style="font-size: 20px; font-weight: bold; color: #1E90FF; cursor: pointer" @click="viewArticleDetail(item)">{{ item.title }}</div>
            <div style="margin-top: 60px; font-size: 14px">
              <span><i class="el-icon-reading" style="margin-right: 5px"></i>{{ item.readCount || 0 }}</span>
              <span><i class="el-icon-time" style="margin-right: 5px; margin-left: 20px"></i>{{ formatDate(item.createTime) }}</span>
            </div>
          </div>
          <div style="width: 200px; text-align: center">
            <el-image v-if="item.img" :src="item.img" style="width: 100px; height: 100px" :preview-src-list="[item.img]"></el-image>
          </div>
        </div>
      </div>
    </div>
    
    <div style="padding: 10px; margin: 10px 0; background-color: #fff; border-radius: 10px">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[2, 5, 10, 20]"
        :page-size="pageSize"
        layout="total, prev, pager, next"
        :total="total"
      >
      </el-pagination>
    </div>

    <!-- 公告详情弹窗 -->
    <el-dialog
      title="公告详情"
      :visible.sync="dialogVisible"
      width="60%"
      :close-on-click-modal="false"
    >
      <div v-if="currentArticle">
        <h3>{{ currentArticle.title }}</h3>
        <div class="detail-time">{{ formatDate(currentArticle.createTime) }}</div>
        <mavon-editor
          class="md"
          :value="currentArticle.content"
          :subfield="false"
          :defaultOpen="'preview'"
          :toolbarsFlag="false"
          :editable="false"
          :scrollStyle="true"
          :ishljs="true"
        />
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "Article",
  data() {
    return {
      articleList: [],
      currentPage: 1,
      pageSize: 10,
      total: 0,
      dialogVisible: false,
      currentArticle: null,
      user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {}
    };
  },
  created() {
    this.loadArticleList();
  },
  methods: {
    loadArticleList() {
      this.request.get("/article/page", {
        params: {
          pageNum: this.currentPage,
          pageSize: this.pageSize
        }
      }).then(res => {
        if (res.code === 200) {
          // 映射字段以适配原有的前端展示
          this.articleList = (res.data.records || []).map(item => ({
            id: item.id,
            title: item.title,
            content: item.introduce,
            createTime: item.createTime,
            img: item.img,
            readCount: item.hits
          }));
          this.total = res.data.total || 0;
        } else {
          this.$message.error(res.msg || '获取公告列表失败');
        }
      }).catch(() => {
        this.$message.error('获取公告列表失败');
      });
    },
    viewArticleDetail(article) {
      // 增加阅读数
      if (article.id) {
        this.request.get(`/article/view/${article.id}`).then(() => {
          // 刷新当前文章的阅读数
          article.readCount = (article.readCount || 0) + 1;
        });
      }
      this.currentArticle = article;
      this.dialogVisible = true;
    },
    handleSizeChange(pageSize) {
      this.pageSize = pageSize;
      this.loadArticleList();
    },
    handleCurrentChange(pageNum) {
      this.currentPage = pageNum;
      this.loadArticleList();
    },
    formatDate(date) {
      if (!date) return '';
      return new Date(date).toLocaleString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit'
      });
    }
  }
};
</script>

<style scoped>
.common-container {
  padding: 0;
}

.common-content {
  margin-bottom: 20px;
}

.md {
  min-height: 400px;
}

.md img {
  max-width: 100%;
  height: auto;
  margin: 10px 0;
}

.md p {
  margin: 10px 0;
  line-height: 1.8;
}

.md h1,
.md h2,
.md h3,
.md h4,
.md h5,
.md h6 {
  margin: 15px 0 10px 0;
  color: #303133;
  line-height: 1.5;
}

.md ul,
.md ol {
  margin: 10px 0;
  padding-left: 25px;
}

.md li {
  margin: 5px 0;
}

.md blockquote {
  margin: 10px 0;
  padding: 10px 15px;
  border-left: 4px solid #ddd;
  background-color: #f9f9f9;
}

.md code {
  background-color: #f1f1f1;
  padding: 2px 4px;
  border-radius: 3px;
  font-family: monospace;
}

.md pre {
  background-color: #f1f1f1;
  padding: 10px;
  border-radius: 5px;
  overflow-x: auto;
  margin: 10px 0;
}

.detail-time {
  color: #909399;
  font-size: 14px;
  margin-bottom: 15px;
}
</style>